<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同宽度的布局示例</title>
    <style>
        /* 容器样式 */
        .container {
            display: flex; /* 使用Flexbox布局 */
            justify-content: space-between; /* 子元素之间的间隔均匀分配 */
            padding: 10px; /* 内边距 */
        }
        /* 子元素样式 */
        .item {
            padding: 20px; /* 内边距 */
            color: white; /* 字体颜色 */
        }
        .item1 {
            background-color: #4CAF50; /* 第一项背景色 */
            flex: 2; /* 占2份宽度 */
        }
        .item2 {
            background-color: #2196F3; /* 第二项背景色 */
            flex: 2; /* 占1份宽度 */
        }
        .item3 {
            background-color: #FF5722; /* 第三项背景色 */
            flex: 2; /* 占3份宽度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">宽度 2</div>
        <div class="item item2">宽度 1</div>
        <div class="item item3">宽度 3</div>
    </div>
</body>
</html>
